<template>
  <div class="center pt-ab login_box cp br-1">
    <div class="logo mb-3">
      <img src="@/assets/images/login/bgLogo.png" alt="" />
    </div>
    <div class="authentication">
      <div v-if="type_ == 1">
        <div class="title">实名认证</div>
        <div class="idcard pt-re">
          <el-input placeholder="请输入姓名">
            <template slot="prepend">姓名</template>
          </el-input>
          <el-input placeholder="请输入身份证号码">
            <template slot="prepend">身份证号码</template>
          </el-input>
          <div class="btmNext" @click="type_ = 2">下一步</div>
        </div>
      </div>
      <div v-else-if="type_ == 2">
        <div class="title">职业认证</div>
        <div class="idcard pt-re">
          <div class="name2">擅长领域</div>
          <el-input
            type="textarea"
            placeholder="请输入擅长领域"
            maxlength="800"
            show-word-limit
            ref="a"
          >
          </el-input>
          <el-input
            ref="b"
            type="textarea"
            placeholder="请输入个人简介"
            maxlength="800"
            show-word-limit
          >
          </el-input>
          <div class="picrte">胸牌/执业证/资格证/职称证，至少上传一项</div>
          <div style="width: 6.25rem; height: 6.25rem">
            <upFile></upFile>
          </div>
          <div class="btmNext" @click="type_ = 1">下一步</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import upFile from "@/components/common/upFile.vue";
export default {
  components: {
    upFile,
  },
  data() {
    return {
      type_: 1,
    };
  },
  watch: {},
  methods: {},
};
</script>
<style lang='less' scoped>
.logo {
  height: 40px;
  text-align: center;

  img {
    width: 390px;
    height: 100%;
  }
}
.btmNext {
  width: 140px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #ea3f47;
  border-radius: 4px;
  position: absolute;
  right: 44px;
  bottom: 0rem;
}
.authentication {
  width: 670px;
  height: 738px;
  background-color: #fff;
  border-radius: 10px;
}
.title {
  color: var(--themeCOlor);
  font-weight: bold;
  text-align: center;
  padding: 44px 0;
  font-size: 20px;
}
.name2 {
  position: absolute;
  left: 50px;
  color: #363636;
  z-index: 99;
  top: 20px;
  z-index: 99;
}
.picrte {
  font-weight: 500;
  margin: 50px 0 30px;
}
.id {
  top: 128px !important;
}
.idcard {
  padding: 0 30px;
  height: 576px;
  .el-input {
    margin-bottom: 16px;
  }
  .el-textarea {
    margin-bottom: 16px;
    position: relative;
    /deep/ textarea {
      padding-top: 50px;
    }
  }
}
</style>